<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				padding: 0;
				margin: 0;
			}
			.banner_list{
				position: relative;
				width: 100%;
			}
			.banner_items{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.banner_item{
				position: absolute;
				visibility: hidden;
			}
			.banner_item a{
				text-decoration: none;
				color:white;
			}
			.banner_image{
				width: 100%;
				height: 100%;
			}
			.banner_info_bar{
				width: 100%;
				position: absolute;
				bottom: 0px;
				height: 50px;
				background-color: rgba(128,128,128,0.5);
				font-size: 18px;
				font-family: "微软雅黑";
			}
			.banner_info_bar_text{
				padding-left:20px;
				line-height: 50px;
			}
			.banner_indicators{
				list-style: none;
				position: absolute;
				z-index: 1000;
				bottom:0;
				right: 100px;
				font-size: 18px;
				font-family: "微软雅黑";
				color:white;
				padding:0;
				margin: 0;
			}
			.banner_indicator{
				float:left;
				border:1px solid lightgray;
				margin: 10px 5px;
				cursor:pointer;
			}
			.banner_indicator.active{
				background-color: darkslategray;
			}
			.banner_indicator span{
				display:inline-block;
				padding:0 8px;
			}
		</style>
	</head>
	<body>
		<div class="banner_list">
			<ul class="banner_items">
				<li class="banner_item">
					<a href="calendar.html">
						<img class="banner_image" src="img/slide-01.jpg"/>
						<div class="banner_info_bar">
							<span class="banner_info_bar_text">这是第一张图片</span>
						</div>
					</a>
				</li>
				<li class="banner_item">
					<a href="cascadingbox.html">
						<img class="banner_image" src="img/slide-02.jpg"/>
						<div class="banner_info_bar">
							<span class="banner_info_bar_text">这是第二张图片</span>
						</div>
					</a>
				</li>
				<li class="banner_item">
					<a href="choosebox.html">
						<img class="banner_image" src="img/slide-03.jpg"/>
						<div class="banner_info_bar">
							<span class="banner_info_bar_text">这是第三张图片</span>
						</div>
					</a>
				</li>
			</ul>
			<ul class="banner_indicators">
				<li class="banner_indicator"><span>1</span></li>
				<li class="banner_indicator"><span>2</span></li>
				<li class="banner_indicator"><span>3</span></li>
			</ul>
		</div>
		<script>
			var currentIndex = 0;
			var items = document.getElementsByClassName("banner_item");
			var indicators = document.getElementsByClassName("banner_indicator");
			var itemsLength = items.length;
			var timer = null;
			
			window.onload = function(){
				initCarousel();
				carousel();
				timer = setInterval(carousel, 3000);
			};
			
			function carousel(){
				for(var i=0;i<itemsLength;i++){
					if(currentIndex == i){
						items[i].style.visibility = "visible";
						indicators[i].classList.add("active");
					} else{
						items[i].style.visibility = "hidden";
						indicators[i].classList.remove("active");
					}
				}
				currentIndex = (currentIndex == itemsLength - 1) ? 0 : currentIndex + 1;
 			}
			
			function initCarousel(){
				var banner_list = document.getElementsByClassName("banner_list")[0];
				var img = document.getElementsByClassName("banner_image")[0];
				banner_list.style.height = img.height + "px";	
				
				for(var i=0;i<itemsLength;i++){
					indicators[i].setAttribute("onclick", "selectIndex(" + i + ")");
				}
			}
			
			function selectIndex(index){
				clearInterval(timer);
				currentIndex = index;
				carousel();
				timer = setInterval(carousel, 3000);
			}
		</script>
	</body>
</html>
